<template>
  <div class="container">
    <div
      class="transition-normal hover-up wow fadeInRight animated border-radius-10"
      :style="`background-position: center;background-image: url(${backImgUrl});height:650px `"
    >
    <div style="height:10%"></div>
        <vue-danmaku :danmus="danmus"
                loop
                use-slot
                style="height:80%; width:100%; padding-top:60px;"
                :channels="7"
                ref="danmaku"
                :right="right"
                :top="top"
                :debounce="300"
                :speeds="150"
                :isSuspend="isSuspend"
                :randomChannel="true"
             class="pt-50"
        >
        <template v-slot:dm="{ index, danmu }">
          <div :style="`background-color: ${getRandomColor()};`" class="barrage-message">
                <img :src="danmu.avatar" class="avatar"   />
                <span>{{ danmu.messageContent }}</span>
              </div>
        </template>
        </vue-danmaku>
         <div style="height:10%">
         <div class="danmaku-input mx-auto">
        <input type="text" v-model="messageInput" class="danmaku-input-field" placeholder="请输入弹幕..." />
        <button class="danmaku-input-button" @click="addDanmu">发送</button>
        </div>
         </div>
 
    </div>
  </div>
</template>

<script>
import vueDanmaku from 'vue-danmaku'
import { mapState } from 'vuex';
export default {
  components: {
     vueDanmaku
  },
  data() {
    return {
      loop:true, //循环
      autoplay:true, //自动播放
      useSlot:true, //插槽
      right:20, //左右间距
      isSuspend:true, //是否暂停
      top:50, //垂直间距
      danmus: [
      ],
      messageList:[],
      messageInput:"",
      backImgUrl:"",
      // Define an array of custom colors
        customColors: [
        'rgb(236, 245, 255)',
        'rgb(103, 194, 58)',
        'rgb(102, 177, 255)',
        'rgb(166, 169, 173)',
        'rgb(235, 181, 99)',
        'rgb(247, 137, 137)',
        'rgb(163, 100, 207)',
      ]
    };
  },
  mounted(){
    this.getMessageList();
    this.addToList();
    this.getPaper();
  },
  methods:{
    addToList() {
      // Your existing method logic...
    },
    getRandomColor() {
      // Randomly select a color from the customColors array
      const randomIndex = Math.floor(Math.random() * this.customColors.length);
      return this.customColors[randomIndex];
    },
    async addDanmu(){
    let message = {
    avatar: this.userAvatar == "" ? this.site.touristAvatar : this.userAvatar,
    nickname: this.userNickName == "" ? '游客' : this.userNickName,
    messageContent: this.messageInput
    }

    if(this.messageInput.trim() == "")
    {
      this.$message({
        'type':'warning',
        'message':'弹幕内容不能为空！'
      })
    }
      const res = await this.$API.message.sendMessage(message);
      if(res.code === 200){
        if(this.site.messageCheck)
        {
        this.$message({
          type:'success',
          message:'留言成功，正在审核中！'
        })
        }
        else{
          this.$message({
          type:'success',
          message:'留言成功！'
        })
        this.$refs.danmaku.add({avatar:message.avatar,name:message.nickname,messageContent:message.messageContent});
        }
        this.messageInput = "";
      }
      else
      {
        this.$message({
          type:'error',
          message:'发送弹幕失败！'
        })
      }
    },
    async getMessageList(){
      const res = await this.$API.message.getMessgelist();
      if(res.code === 200){
        this.danmus = res.data;
      }
      else
      {
        this.$message({
          type:'error',
          message:'获取弹幕列表失败！'
        })
      }
    },
    getPaper(){
      //获取留言壁纸
      this.$API.photo.getWallpaper().then(res=>{
        if(res.code === 200){
          this.backImgUrl = res.data;
        }
        else
        {
          this.$message({
            type:'error',
            message:'获取留言壁纸失败！'
          })
        }
      })
    }

  },
  computed:{
    site(){
        return this.$store.state.site.site.siteConfig || {};
    }, 
    userNickName(){
      return this.$store.state.user.userInfo.nickname || "";
    },
    userAvatar(){
       return this.$store.state.user.avatar || "";
    }
  }
}
</script>

<style scoped>
/* 自定义样式，可以根据需要进行调整 */
.barrage-message {
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 25px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

/* 弹幕输入框样式 */
.danmaku-input {
  width: 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  bottom: 0px;
  background-color: rgba(134, 130, 130, 0.3); /* 使用淡灰色半透明背景 */
  border-radius: 25px; /* 圆角 */
  padding: 0px;
}

.danmaku-input-field {
  width: 80%;
  flex-grow: 1;
  border: none;
  background-color: transparent; /* 输入框透明背景 */
  padding: 10px;
  margin-right: 0; /* 右侧不留间距 */
}

.danmaku-input-button {
   width: 20%;
  background-color: transparent; /* 使用淡灰色半透明背景 */
  color: #fff; /* 文本颜色 */
  border: none;
  padding: 0px 20px;
  cursor: pointer;
}

/* 当屏幕宽度小于600px时应用的样式 */
@media (max-width: 800px) {
  .danmaku-input {
    width: 100%;
  }
}
</style>
